<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width",
          initial-scale="1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中第一种实现方案</title>
    <style>
        #parent {
            width: 200px;
            height: 600px;
            background: #ccc;
            /*
              display属性：
                table:设置当前元素为table元素
                table-cell:设置当前元素为<td>元素（单元格）
            */
            display: table-cell;
            vertical-align: middle;
            /*
            vertical-align(本来是设置文本内容的垂直方向对齐方式) 但是只跟table-cell结合才能生效
                top 顶部对齐
                middle 居中对齐
                bottom 底部对齐
             */

        }
        #child {
            width: 200px;
            height: 200px;
            background: #c9394a;


        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child"></div>
</div>

</body>
</html>